#site-banner {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  font-family: var(--site-ui-fontFamily);
  font-weight: 500;
  font-size: 1rem;

  gap: 0.5rem;
  padding: 0.75rem;
  text-align: center;
  background: var(--site-banner-bgColor);
  color: var(--site-banner-fgColor);
  z-index: var(--site-z-floating);

  p {
    overflow-wrap: anywhere;
    word-break: normal;
    margin: 0;
    flex-grow: 1;
    text-wrap: balance;
  }

  a,
  button {
    white-space: nowrap;
    color: var(--site-onPrimary-color);
    font-family: var(--site-ui-fontFamily);

    &:hover {
      color: var(--site-onPrimary-color-light);
    }

    &:active {
      color: var(--site-onPrimary-color-lighter);
    }
  }

  *:focus-visible {
    outline-color: var(--site-onPrimary-color);
  }
}
